<script lang="ts" setup>
import banner from '@/assets/home/banner.png';
import OButton from '@/components/OButton.vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vitepress';
import AlertCircle from '~icons/app/alert-circle';

const router = useRouter();

console.log(router);

const { t } = useI18n();

const props = defineProps({
  buttonName: {
    type: String,
    default: '点击按钮',
  },
});

const handleClick = function () {
  console.log('click');
};
</script>

<template>
  <div class="wrapper">
    <img :src="banner" />

    <h1>{{ t('title') }}</h1>

    <o-icon><alert-circle></alert-circle></o-icon>

    <o-button style="margin-top: 20px">o-button</o-button>
    <el-button style="margin-top: 20px">elment-button</el-button>
    <button @click="handleClick" class="test">{{ buttonName }}</button>
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--theme-bg);
}

.test {
  margin-top: 20px;
}
</style>
